<template>
    <div id="box">
        <div id="search">
            <el-form :inline="true" :model="scoreSearch" class="demo-form-inline">
                <el-form-item label="班级">
                    <el-input v-model="scoreSearch.query.clazz" placeholder="请输入班级"></el-input>
                </el-form-item>
                <el-form-item label="考试时间">
                    <el-date-picker
                            style="width: 90%"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="scoreSearch.query.examTime"
                            type="datetime"
                            placeholder="选择考试时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-share" @click="exportSubmit">导出成绩</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div id="header-bth">
            <el-button type="primary" size="small" icon=el-icon-circle-plus-outline @click="showAddScore">添加</el-button>
            <el-button type="primary" size="small" icon=el-icon-circle-plus-outline @click="uploadDialogVisible=true">
                批量导入
            </el-button>
        </div>
        <div id="role-table">
            <el-table
                    :data="tableData"
                    stripe
                    height="310"
                    style="width: 100%">
                <el-table-column label="学号">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.studentNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名">
                    <template slot-scope="scope">
                        <span>{{ scope.row.studentName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="班级">
                    <template slot-scope="scope">
                        <span>{{ scope.row.clazz }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="考试内容">
                    <template slot-scope="scope">
                        <span>{{ scope.row.examContent }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="成绩">
                    <template slot-scope="scope">
                        <span>{{ scope.row.score }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="考试时间" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.examTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280px">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">
                        </el-button>

                        <el-popconfirm title="确定删除吗？" @confirm="deleteDept(scope.$index, scope.row)">
                            <el-button
                                    slot="reference"
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete">
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="nav-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageSizes"
                    :page-size="scoreSearch.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--添加 编辑成绩信息弹窗-->
        <el-dialog :title="dialogTitle" :visible.sync="addScoreFormVisible" width="40%" @close="clearInfo">
            <el-form :model="scoreForm" ref="scoreInfo" :rules="scoreRules" label-width="90px" size="medium">
                <el-input v-model="scoreForm.id" autocomplete="off" v-show="false"></el-input>
                <el-form-item label="学号" prop="studentNo"  v-if="dialogTitle=='添加成绩'">
                    <el-input v-model="scoreForm.studentNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="studentName">
                    <el-input v-model="scoreForm.studentName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="clazz">
                    <el-input v-model="scoreForm.clazz" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="成绩" prop="score">
                    <el-input v-model="scoreForm.score" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="考试内容" prop="examContent">
                    <el-input v-model="scoreForm.examContent" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="考试时间" prop="examTime" v-if="dialogTitle=='添加成绩'">
                    <el-date-picker
                            style="width: 100%"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="scoreForm.examTime"
                            type="datetime"
                            placeholder="选择考试时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
        <!--批量导入弹窗-->
        <el-dialog title="导入成绩" :visible.sync="uploadDialogVisible" width="27%">
            <el-upload
                    drag
                    class="upload-demo"
                    action='#'
                    name='file'
                    accept=".xls,.xlsx"
                    :show-file-list="false"
                    :http-request="batchAdd"
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        </el-dialog>
    </div>
</template>


<script>

    import {
        batchExport,
        batchImportScore,
        getScoreById,
        getScoreList,
        removeScore,
        saveOrUpdateScore
    } from "@/api/score";
    import fileDownload from "js-file-download"
    export default {
        name: "ScoreView",
        data() {
            return {
                tableData: [],
                addScoreFormVisible: false,
                uploadDialogVisible: false,
                dialogTitle: '',
                scoreForm: {},
                scoreSearch: {
                    limit: 5,
                    page: 1,
                    query:{
                        clazz:'',
                        examTime:''
                    }
                },
                pageSizes: [5, 10,15],
                total: 10,
                scoreRules: {
                    studentNo: [{required: true, message: '请输入学号', trigger: 'blur'}],
                    studentName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    score: [{required: true, message: '请输入成绩', trigger: 'blur'}],
                    clazz: [{required: true, message: '请输入班级', trigger: 'blur'}],
                    examContent: [{required: true, message: '请输入考试内容', trigger: 'blur'}],
                    examTime: [{required: true, message: '请选择考试时间', trigger: 'blur'}]
                }
            }
        },
        methods: {
            // 改变每页显示的条数触发
            handleSizeChange(val) {
                this.scoreSearch.limit = val;
                this.list()
            },
            // 改变页码触发
            handleCurrentChange(val) {
                this.scoreSearch.page = val;
                this.list()
            },
            //删除成绩信息
            deleteDept(index, row) {
                removeScore(row.id).then(res=>{
                    if (res.code ==0){
                        this.$message.success(res.message)
                        this.list();
                    }
                })
            },
            // 显示添加成绩信息弹窗
            showAddScore() {
                this.dialogTitle = '添加成绩'
                this.addScoreFormVisible = true
            },
            //编辑成绩信息
            handleEdit(index, row) {
                this.dialogTitle = '编辑成绩'
                this.addScoreFormVisible = true
                //发送异步请求 获取学生成绩 数据回显
                getScoreById(row.id).then(res=>{
                    this.scoreForm = res.data
                })
            },
            // 添加更新成绩
            saveOrUpdate() {
                this.$refs.scoreInfo.validate(valid => {
                    if (!valid) {
                        this.$message.warning('请输入完整信息')
                        return
                    }
                    // 添加 或修改学生成绩
                    saveOrUpdateScore(this.scoreForm).then(res=>{
                        if (res.code==0){
                            this.addScoreFormVisible = false
                            this.$message.success(res.message)
                            this.list();
                        }
                    })

                })
            },
            //批量导入成绩
            batchAdd(file) {
                let formData = new FormData();
                formData.append("file", file.file)
                batchImportScore(formData).then(res=>{
                    if (res.code == 0){
                        this.uploadDialogVisible=false
                        this.list()
                        this.$message.success(res.message)
                    }else if (res.code==500){
                        this.$message.error(res.message)
                    }
                })

            },
            // 搜索成绩信息
            onSearchSubmit() {
                this.scoreSearch.page = 1
                this.list()
            },
            // 导出成绩
            exportSubmit() {
                let  clazz = this.scoreSearch.query.clazz
                let  examTime = this.scoreSearch.query.examTime
                batchExport({clazz,examTime}).then(res=>{
                    fileDownload(res,new Date().getTime()+".xlsx")
                })
            },
            // 关闭弹窗清空数据
            clearInfo() {
                this.scoreForm = {}
                this.$refs.scoreInfo.clearValidate()
            },
            list() {
                getScoreList(this.scoreSearch).then(res=>{
                    if (res.code==0){
                        this.total = res.data.total
                        this.tableData = res.data.pageData
                    }
                })
            }
        },
        created() {
            this.list()
        }
    }
</script>

<style scoped>
    #box{
        width: 95%;
        margin: 5px auto 0;
    }

    #search {
        margin-top: 40px;
        padding: 5px;
        border-bottom: 1px solid #eee;
    }

    #header-bth {
        margin-top: 20px;
        margin-bottom: 20px;
    }


    #nav-page {
        margin-top: 15px;
    }

    .el-button {
        margin-left: 5px;
        margin-right: 5px;
    }
</style>


